@extends('base.base')
@section('base')
<!-- 内容区域 -->
<div class="main-panel" style="user-select: none;">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">请填写商品信息</h4>
                        <form class="forms-sample" id="form">
                            <div class="form-group" style="position: relative;">
                                <label>* 产品分类</label>
                                <div class="item-box"
                                    style="width: 100%;height: 6vh;border: 1px solid #eee;display: flex;justify-content: flex-start;align-items: center;">

                                </div>
                                <div class="product-type"
                                    style="position: absolute;width: 100%;top: 11vh;background-color: white;display: none;padding-bottom: 2vh;overflow-y: scroll;height: 30vh;">

                                </div>
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品名称</label>
                                <input type="text" class="form-control required" name="store_name">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品简介</label>
                                <textarea name="store_info" cols="30" rows="5"></textarea>
                            </div>

                            <div class="form-group group-item">
                                <label>* 产品关键字</label>
                                <input type="text" class="form-control required" name="keyword">
                            </div>
                            <div class="form-group group-item">
                                <label>* 产品单位</label>
                                <input type="text" class="form-control required" name="unit_name">
                            </div>
                            <div class="form-group">
                                <label>* 产品条码</label>
                                <input type="text" class="form-control" name="bar_code" value="">
                            </div>
                            <div class="form-group" id="image" style="display: block;">
                                <label>* 产品主图</label>
                                <input type="file" class="file-upload-default img-filename-show" data-path="config">
                                <input type="hidden" class="image-path value-input iamge-inp">
                                <div class="input-group col-xs-12">
                                    <input type="text" class="form-control file-upload-info image" disabled="">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-gradient-primary"
                                            onclick="upload($(this))" type="button">上传</button>
                                    </span>
                                </div>
                                <div class="img-y">
                                </div>
                            </div>
                            <div class="form-group" id="image" style="display: block;">
                                <label>* 产品轮播图</label>
                                <input type="file" class="file-upload-default img-file" data-path="config">
                                <input type="hidden" class="image-path value-input">
                                <div class="input-group col-xs-12">
                                    <input type="text" class="form-control file-upload-info" disabled="">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-gradient-primary"
                                            onclick="upload($(this))" type="button">上传</button>
                                    </span>
                                </div>
                                <div class="img-yl">
                                </div>
                            </div>
                            <div class="from-group-box">
                                <div class="form-group from-group-box-item">
                                    <label>* 产品售价</label>
                                    <input type="number" class="form-control required" name="price">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 产品市场价</label>
                                    <input type="number" class="form-control required" name="ot_price">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 赠送积分</label>
                                    <input type="number" class="form-control required" name="give_integral">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 邮费</label>
                                    <input type="number" class="form-control required" name="postage">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 销量</label>
                                    <input type="number" class="form-control required" name="sales" value="0">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 虚拟销量</label>
                                    <input type="number" class="form-control required" name="ficti" value="0">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 库存</label>
                                    <input type="number" class="form-control required" name="stock">
                                </div>
                                <div class="form-group from-group-box-item">
                                    <label>* 排序</label>
                                    <input type="number" class="form-control required" name="sort" value="0">
                                </div>
                            </div>
                            <div class="form-group"
                                style="display: flex;justify-content: space-between;align-items: center;">
                                <label>* 是否包邮</label>
                                <p class="postage"
                                    style="display: flex;justify-content: space-between;align-items: center;margin-left: 1vw;margin-bottom: 1.5vh;">
                                    <span style="display:inline-block;">
                                        是
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=1 checked>
                                    &nbsp; &nbsp;
                                    <span style="display:inline-block;">
                                        否
                                    </span>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="form-control required" name="is_postage" value=0>
                                </p>
                            </div>
                            <!-- <div class="form-group" style="display: flex;justify-content: space-between;align-items: center;">
                                <label>* 是否包邮</label>
                                <p>
                                    是<input type="radio" class="form-control required" name="is_postage" value="1">
                                    否<input type="radio" class="form-control required" name="is_postage" value="0">
                                </p>
                            </div> -->
                            <!-- <div style="display: flex;justify-content: space-between;align-items: center;">
                                <div class="form-group"
                                    style="display: flex;justify-content: space-between;align-items: center;">
                                    <label>* 产品状态</label>
                                    <p
                                        style="display: flex;justify-content: space-between;align-items: center;margin-left: 1vw;margin-bottom: 1.5vh;">
                                        上架<input type="radio" class="form-control required" name="is_show"
                                            placeholder="" value=1 checked>
                                        &nbsp;下架<input type="radio" class="form-control required" name="is_show"
                                            placeholder="" value=0>
                                    </p>
                                </div>
                            </div> -->
                            <div class="form-group"
                                style="display: flex;justify-content: space-between;align-items: center;">
                                <label>* 产品状态</label>
                                <p class="grounding"
                                    style="display: flex;justify-content: space-between;align-items: center;margin-left: 1vw;margin-bottom: 1.5vh;">
                                    <span style="display:inline-block;">上架
                                    </span>
                                    <input type="radio" class="form-control required" name="is_show" placeholder=""
                                        value=1>
                                    &nbsp;
                                    <span style="display:inline-block;">下架
                                    </span>
                                    <input type="radio" class="form-control required" name="is_show" placeholder=""
                                        value=0 checked>
                                </p>
                            </div>
                            <div class="form-group group-item" id="text" style="display: block;margin-top: 2vh;">
                                <label>* 产品详情</label>
                                <!-- <textarea style="height:400px;max-height:400px;overflow: hidden" id="box"></textarea> -->
                                <textarea placeholder="请在此处编辑内容" id="editor"
                                    style="height:400px;max-height:400px;overflow: hidden"></textarea>
                            </div>
                            <button type="button" onclick="commit()"
                                class="btn btn-sm btn-gradient-primary btn-icon-text">
                                <i class="mdi mdi-file-check btn-icon-prepend"></i>
                                提交
                            </button>
                            <button type="button" onclick="cancel()"
                                class="btn btn-sm btn-gradient-warning btn-icon-text">
                                <i class="mdi mdi-reload btn-icon-prepend"></i>
                                取消
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .img-y img {
        width: 120px;
    }
    .from-group-box-item{
        width: 45%;
    }
    .from-group-box{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
</style>
<script>
    let array = [];
    @foreach($cate_list as $value)
    @if (!empty($value['son']))
        @foreach($value['son'] as $val)
        var obj = { "name": "---{{$val['cate_name']}}", "id": "{{$val['id']}}" }
    array.push(obj);
    @endforeach
    @endif
    @endforeach
    $(document).on('change', '#type', function () {
        if ($(this).val() == 'string') {
            $('#string').show().find('input').attr('name', 'config_value');
            $('#text').hide().find('textarea').removeAttr('name');
            $('#image').hide().find('.value-input').removeAttr('name');
        } else if ($(this).val() == 'text') {
            $('#text').show().find('textarea').attr('name', 'config_value');
            $('#string').hide().find('input').removeAttr('name');
            $('#image').hide().find('.value-input').removeAttr('name');
        } else if ($(this).val() == 'image') {
            $('#string').hide().find('input').removeAttr('name');
            $('#text').hide().find('textarea').removeAttr('name');
            $('#image').show().find('.value-input').attr('name', 'config_value');
        }
        let obj = {
            jian: str,
            id: id
        }
    })
    var editor = new wangEditor('editor');
    // 上传图片（举例）
    editor.config.uploadImgUrl = "/admin/wangeditor/upload";
    // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
    editor.config.hideLinkImg = false;

    editor.create();
    function commit() {
        if (!checkForm()) {
            return false;
        }
        let imgURL = $('.image').val();
        let obj = $('.img-yl')[0].innerHTML.split('"');
        var arr = [];
        obj.forEach(function (item, index) {
            if (index % 2 != 0) arr.push(item)
        });
        var data = $("#form").serializeObject();
        let msg = $("#editor").val()
        Object.assign(data, { cate_id: cateId }, { image: imgURL }, { slider_image: arr }, { description: msg })
        var image = $('')
        myRequest("/admin/product/add", "post", data, function (res) {
            layer.msg(res.msg)
        });
    }
    function cancel() {
        parent.location.reload();
    }

    function render() {
        for (var i in array) {
            $('.product-type').append(`<div class='product-type-item' style="border-bottom:solid 1px #ccc;padding:1vh 1vw;" onclick="addClick('${array[i].name}','${array[i].id}')">${array[i].name}</div>`)
        }

    }
    render();

    let cateId = [];
    function addClick(e, q) {
        if (cateId.indexOf(q) == -1) {
            cateId.push(q)
            $('.item-box').append(`<div class='type-item' style="border-radius:3px;height:90%;display:flex;justify-content: splice-between;align-items: center;padding:0 5px;margin-left:5px;background-color:#eee;"><div style="display:flex;justify-content: center;align-items: center;margin-right:5px;">${e}</div><div style="display:flex;justify-content: center;align-items: center;background-color:rgb(216, 145, 145);padding:0 4px;border-radius:2px;font-size:18px;" onclick="deleteClick('${q}')">x</div></div>`)
        } else {
            return
        }
        console.log($('.img-y').children())
    }

    function deleteClick(q) {

        if (cateId.indexOf(q) != -1) {
            $('.type-item').eq(cateId.indexOf(q)).remove()
            cateId.splice(cateId.indexOf(q), 1)
        } else {
            return
        }
    }
    $('.product-type').hide();
    $('.item-box').click(function () {
        $('.product-type').show();
    })
    $('.group-item').click(function () {
        $('.product-type').hide();
    })



</script>
@endsection